<template>
  <div class="info">
    <div class="info-header">
      <el-upload action="api/judge-backend/userinfo/avatar" :before-upload="beforeAvatarUpload" :show-file-list="false"
        :headers="myHeaders" :http-request="importData">
        <div class="img-box">
          <el-image class="avatar" :src="$store.oj.getUserAvatar"></el-image>
        </div>
      </el-upload>
      <div class="avatar-text">
        <div class="nick">{{ userData.nickname || "用户名" }}</div>
        <div class="signature">
          <div class="text" @click="isEdit = true" v-show="!isEdit">
            {{ userData.signature || "编辑你的个性签名~" }}
          </div>
          <n-input v-show="isEdit" size="small" clearable class="ninput" v-model:value="userData.signature"
            @blur="isEdit = false" placeholder="编辑你的个性签名~"></n-input>
        </div>
      </div>
    </div>
    <div class="info-body">
      <div class="item">
        <div class="title">用户昵称</div>
        <n-input class="n-input" size="small" v-model:value="userData.nickname"
          :placeholder="userData.nickname"></n-input>
      </div>
      <div class="item">
        <div class="title">真实姓名</div>
        <n-input class="n-input" size="small" v-model:value="userData.realName" :placeholder="userData.realName"
          :disabled="isDisabled"></n-input>
      </div>
      <div class="item">
        <div class="title">性别</div>
        <n-select class="n-input" v-model:value="userData.gender" :options="options" size="small"></n-select>
      </div>
      <div class="item">
        <div class="title">学号</div>
        <n-input class="n-input" :disabled="isDisabled" size="small" v-model:value="userData.number"
          :placeholder="userData.number"></n-input>
      </div>
      <div class="item">
        <div class="title">博客</div>
        <n-input class="n-input" size="small" v-model:value="userData.blog" :placeholder="userData.blog"></n-input>
      </div>
      <div class="item">
        <div class="title">QQ</div>
        <n-input class="n-input" size="small" v-model:value="userData.qq" :placeholder="userData.qq"></n-input>
      </div>
      <div class="item">
        <div class="title">Github</div>
        <n-input class="n-input" size="small" v-model:value="userData.github" :placeholder="userData.github"></n-input>
      </div>
      <div class="item">
        <div class="title">学校名称</div>
        <n-input :disabled="isDisabled" class="n-input" size="small" v-model:value="userData.school"
          :placeholder="userData.school"></n-input>
      </div>
      <div class="item">
        <div class="title">所属学院</div>
        <n-input class="n-input" size="small" v-model:value="userData.college" :disabled="isDisabled"
          :placeholder="userData.college"></n-input>
      </div>
      <div class="item">
        <div class="title">专业名称</div>
        <n-input class="n-input" size="small" v-model:value="userData.major" :disabled="isDisabled"
          :placeholder="userData.major"></n-input>
      </div>
    </div>
    <div class="info-footer">
      <n-button class="btn" type="primary" strong secondary size="small" round @click="updateUserInfo()">保存</n-button>
    </div>
  </div>
</template>

<script>
import { updateUserInfoAPI } from "@/api/ojAPI/ojAPI"
import { ElMessage } from "element-plus"
import request from "@/axios/request.js"
import { getSettingUserAPI } from '@/pages/adminPage/setting/api'

export default {
  data() {
    return {
      userData: {},
      options: [
        {
          label: "男",
          value: "男",
        },
        {
          label: "女",
          value: "女",
        },
        {
          label: "保密",
          value: "保密",
        },
      ],
      timer: 0,
      myHeaders: {
        Authorization: "",
      },
      isEdit: false,
      isDisabled: true,
    }
  },
  methods: {
    async updateUserInfo() {
      const now = Date.now()
      if (now - this.timer >= 3000) {
        this.timer = now
        await updateUserInfoAPI(this.userData)
          .then((res) => {
            if (res.data.code === 200) {
              ElMessage.success("更新成功")
            }
          })
          .catch((err) => {
            ElMessage.success("系统错误")
          })
      } else {
        ElMessage.warning("请勿频繁请求")
      }
    },
    beforeAvatarUpload(rawFile) {
      if (rawFile.type !== "image/jpeg") {
        ElMessage.error("请上传jpg类型文件")
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error("图片应小于2M")
        return false
      }
      return true
    },
    importData(item) {
      let formData = new FormData()
      formData.append("file", item.file)
      request
        .put(`/judge-backend/userinfo/avatar`, formData)
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage.success("更新成功")
            this.$store.oj.updateAvatar(res.data.data)
          }
        })
        .catch((err) => {
          ElMessage.error("系统错误")
        })
      // axios({
      //   method: 'put',
      //   url: reqURL,
      //   data: formData,
      // }).then(function (res) {
      //   console.log(res)
      // }).catch(function (error) {
      //   console.log(error)
      // })
    },
    getSettingUser() {
      getSettingUserAPI().then(res => {
        if (res.data.code === 200) {
          this.isDisabled = !res.data.data
        }
      })
    }
  },
  mounted() {
    this.userData = this.$store.oj.userData
    this.myHeaders.Authorization = localStorage.getItem("TOKEN")
    this.getSettingUser()
  },
  computed: {
    getUserAvatar() {
      return this.$store.oj.userData.avatar
        ? import.meta.env.VITE_APP_URL + '/' + this.$store.oj.userData.avatar : ''
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  width: 100%;
  position: relative;

  .header-bg {
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: blur(4px);
    position: absolute;
    z-index: 0;
  }

  .info-header {
    width: 100%;
    height: 200px;
    display: flex;
    border-bottom: 5px solid #888;

    .img-box {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      overflow: hidden;
      margin: auto 0 auto 50px;
      border: 3px solid #888;
      display: flex;

      .avatar {
        width: 150px;
        height: 150px;
        margin: auto;
        border-radius: 50%;
        border: 3px solid #888;
      }
    }

    .avatar-text {
      display: flex;
      flex-direction: column;
      margin-left: 20px;
      justify-content: center;
      color: #333;

      .nick {
        font-size: 26px;
        font-weight: 600;
      }

      .signature {
        font-size: 16px;
        color: #888;

        .text {
          width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .info-body {
    width: 100%;
    padding-left: 50px;

    .item {
      font-weight: 550;
      font-size: 16px;
      margin: 20px 0;
      color: #333;
      display: flex;

      .title {
        width: 70px;
        height: 25px;
        line-height: 25px;
        text-align: justify;
        text-align-last: justify;
        margin: auto 0;
      }

      .n-input {
        width: 40%;
        margin: auto 10px;
      }
    }
  }

  .info-footer {
    width: 100%;
    height: 100px;
    display: flex;

    .btn {
      width: 100px;
      margin: auto auto 20px auto;
    }
  }
}
</style>
